<template xmlns="http://www.w3.org/1999/html">
  <sea-data-table ref="tableObject" :auto-load="false" :table-height="360" :is-page="false"
                  url="/resource/mapping/listFile" :where="where" :on-action="onAction">
    <!--表头-->
    <sea-table-header slot="header" disabled-form>
      <!--标题栏-->
      <template slot="title">
        <span v-for="(btn, idx) in buttons" :key="idx">
          <el-button type="text" class="buttons" title="点击访问该目录" @click="openDirectory(btn)">
            {{ btn.label }}&nbsp;
          </el-button>/
        </span>
      </template>
      <!--按钮栏-->
      <template slot="buttons">
        <el-button size="small" icon="fa fa-fast-backward" title="返回根目录" @click="openFirst"></el-button>
        <el-button size="small" icon="fa fa-backward" title="返回上一页" @click="openBefore"></el-button>
      </template>
    </sea-table-header>

    <template slot="drawer">
    </template>

    <!--表头-->
    <template slot="columns">
      <el-table-column property="name" label="文件名" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column property="path" label="磁盘路径" width="180"></el-table-column>
      <sea-col-dictionary property="isFile" label="类型" width="180" options="non.file_type"></sea-col-dictionary>
      <el-table-column property="length" label="大小（kb）" width="180"></el-table-column>
      <el-table-column property="lastModified" label="最后修改时间" width="180"></el-table-column>
      <el-table-column property="canRead" label="可读" width="180"></el-table-column>
      <el-table-column property="canWrite" label="可写" width="180"></el-table-column>

      <!--操作栏-->
      <sea-table-actionbar width="180" :on-action="onAction" :buttons="actionbar"></sea-table-actionbar>
    </template>
  </sea-data-table>
</template>

<script>

export default {
    components: {},
    props: {
        // 成功回调，通常是刷新数据表格
        onSucceed: {type: Function, default: undefined}
    },
    data() {
        return {
            // 当前查看的数据映射
            row: {type: Object, default: undefined},
            // 按钮列表
            buttons: [{label: 'Root', value: ''}],
            // 表单限制条件
            where: undefined,
            // 操作栏
            actionbar: [
                {evt: 'edit', type: 'btn', label: 'click'}
            ]
            // end--
        }
    },
    methods: {
        /**
         * 操作栏事件分发，如果是文件，则转为下载，如果是文件夹，则进入下一级路径
         *
         * @param evt 事件
         * @param row 行级数据
         * @param old 可供回滚的数据
         */
        onAction: function (evt, row, old) {
            if (evt === 'edit') {
                //资源映射配置
                let mapping = this.row;
                //当前操作的文件对象
                let file = row;
                if (file.isFile) {
                    // 文件自动转为下载
                    let url = this.$layers.addParamsToUrl('/resource/mapping/download',
                        {id: mapping.id, url: file.path, fileName: file.name});

                    window.open(url);
                } else {
                    // 如果是磁盘目录，则进入下一层级
                    let url = (file.path || '') + '\\' + file.name;
                    this.where = {id: mapping.id, url: url};
                    this.buttons.push({label: file.name, value: url});
                }
            }
        },
        /**
         * 刷新界面
         *
         * @param row 行数据
         */
        setRowData(row) {
            this.row = row;
            this.where = {id: this.row.id, url: ''}
        },
        /**
         * 打开根目录
         */
        openFirst: function () {
            if (this.buttons.length > 1) {
                this.openDirectory(this.buttons[0])
            }
        },
        /**
         * 打开上一页
         */
        openBefore: function () {
            if (this.buttons.length > 1) {
                this.openDirectory(this.buttons[this.buttons.length - 2])
            } else {
                Layers.warn('已到达文件根目录！');
            }
        },
        /**
         * 打开文件夹
         *
         * @param btn 按钮参数
         */
        openDirectory: function (btn) {
            let arr = [];
            for (let i = 0; i < this.buttons.length; i++) {
                arr.push(this.buttons[i]);
                if (this.buttons[i].value === btn.value) {
                    break;
                }
            }
            this.buttons = arr;

            let mapping = this.row;
            this.where = {id: mapping.id, url: btn.value}
        },
        /**
         * 新增/编辑操作成功，关闭当前窗口
         *
         * @param ret 后台响应数据
         */
        operationSuccess: function (ret) {
            if (this.onSucceed !== undefined) {
                this.onSucceed(ret)
            }
        }
    }
}
</script>

<style scoped>
.buttons {
    font-size: 16px;
}
</style>
